import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";

import Install from "./_install.mdx";
import Tailwind from "./_tailwind.mdx";

# React Native

:::info

NativeWind works with both Expo and framework-less React Native projects but Expo provides a more streamlined experience.

**Web**: If you wish to use Metro to bundle for website or App Clip and you are **not** using Expo, you will need either: Expo's Metro config `@expo/metro-config` or manually use Tailwind CLI to generate a CSS file.

:::

## Installation

### 1. Install NativeWind

<Install />

### 2. Setup Tailwind CSS

<Tailwind />

### 3. Add the Babel preset

<Tabs groupId="framework">
  <TabItem value="Expo SDK 50+">
    ```js title="babel.config.js"
    module.exports = function (api) {
      api.cache(true);
      return {
        presets: [
          ["babel-preset-expo", { jsxImportSource: "nativewind" }],
          "nativewind/babel",
        ],
      };
    };
    ```
  </TabItem>

  <TabItem value="Expo SDK 49">
    ```js title="babel.config.js"
    module.exports = function (api) {
      api.cache(true);
      return {
        presets: [
          ["babel-preset-expo", { jsxImportSource: "nativewind" }],
          "nativewind/babel",
        ],
        plugins: [
          // Required for expo-router
          "expo-router/babel",
          "react-native-reanimated/plugin",
        ]
      };
    };
    ```
  </TabItem>

  <TabItem value="framework-less" label="Framework-less">

```diff title="babel.config.js"
module.exports = {
- presets: ['<existing presets>'],
+ presets: ['<existing presets>', 'nativewind/babel'],
};
```

  </TabItem>
</Tabs>

### 4. Modify your metro.config.js

<Tabs groupId="framework">
  <TabItem value="Expo SDK 49">

    ```js title="metro.config.js"
    const { getDefaultConfig } = require("expo/metro-config");
    const { withNativeWind } = require('nativewind/metro');

    const config = getDefaultConfig(__dirname, { isCSSEnabled: true })

    module.exports = withNativeWind(config, { input: './global.css' })
    ```

  </TabItem>
  <TabItem value="Expo SDK 50+">

    ```js title="metro.config.js"
    const { getDefaultConfig } = require("expo/metro-config");
    const { withNativeWind } = require('nativewind/metro');

    const config = getDefaultConfig(__dirname)

    module.exports = withNativeWind(config, { input: './global.css' })
    ```

  </TabItem >

  <TabItem value="frameworkless" label="Framework-less">

```js title="metro.config.js"
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = mergeConfig(getDefaultConfig(__dirname), {
  /* your config */
});

module.exports = withNativeWind(config, { input: "./global.css" });
```

  </TabItem>
</Tabs>

### 5. Import your CSS file

```js title="App.js"
import "./global.css"

export default App() {
  /* Your App */
}
```

### 6. Modify your `app.json` (Expo only)

Switch the bundler to use the [Metro bundler](https://docs.expo.dev/guides/customizing-metro/#web-support)

```js
{
  "expo": {
    "web": {
      "bundler": "metro"
    }
  }
}
```

### 7. TypeScript (optional)

Please follow the [TypeScript guide](./typescript).
